<template>
    <div class="myIntegralcontentbox">
        <div class="title">
            {{ $t('assemble.我的积分') }}
        </div>

        <div class="myIntegralbox">
            <div class="topbox">
                <div class="sum">
                    <span> {{ $t('assemble.共计') }}</span>
                    <span style="color:#D32526; margin-left: 5px;">{{ money }}</span>
                </div>
                <div class="duihuanbtn" @click="handleduihuanType">
                    {{ $t('assemble.积分兑换') }}
                </div>

            </div>

            <div class="databox">
                <div class="dataHeader">
                    <!-- <p> {{ $t('assemble.客户头像') }}</p> -->
                    <p> {{ $t('assemble.客户名字') }}</p>
                    <p> {{ $t('assemble.联系电话') }}</p>
                    <p> {{ $t('assemble.项目') }}</p>
                    <p> {{ $t('assemble.状态') }}</p>
                    <p> {{ $t('assemble.积分数量') }}</p>
                    <p> {{ $t('assemble.到账时间') }}</p>
                </div>

                <div v-if="dataList.length > 0" class="dataList">
                    <div class="item" v-for="(item, index) in dataList" :key="item.id">
                        <p style="width: 180px; text-align: center;">{{ item.user_custom.name }}</p>
                        <p style="width: 261px; text-align: center;">{{ item.user_custom.mobile }}</p>
                        <p style="width: 122px; text-align: center;">{{ item.user_custom.item }}</p>

                        <p v-if="item.user_custom.status == 1" style="width: 141px; text-align: center;">{{
                            $t('assemble.已联系没兴趣') }}</p>
                        <p v-if="item.user_custom.status == 2" style="width: 141px; text-align: center;">{{
                            $t('assemble.正在沟通中') }}</p>
                        <p v-if="item.user_custom.status == 3" style="width: 141px; text-align: center;">{{
                            $t('assemble.已完成') }}</p>
                        <p v-if="item.user_custom.status == 4" style="width: 141px; text-align: center;">{{
                            $t('assemble.介绍费已到账') }}</p>

                        <p v-if="item.status == 1" style="width: 200px; text-align: center;">+{{ item.before_num }}</p>
                        <p v-if="item.status == 2" style="width: 200px; text-align: center;">-{{ item.before_num }}</p>
                        <p style="width: 200px; text-align: center;">{{ item.user_custom.created_at }}</p>
                    </div>
                </div>

            </div>
            <div class="fenye">
                <el-pagination background layout="prev, pager, next" :page-size="this.pageInfo.pageSize"
                    :page-sizes="[5, 10, 15, 20]" :total="pageInfo.total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </div>

        <el-dialog :visible.sync="centerDialogVisible" width="28%" center :show-close="false">
            <div class="typeBox">
                <div @click="handleduihuanTyperouter('xianjin')">
                    <img v-if="lang == 'en'" src="../../../static/image/xianjinen.png" alt="">

                    <img v-else src="../../../static/image/xianjin.png" alt="">
                </div>
                <div @click="handleduihuanTyperouter('quan')">
                    <img v-if="lang == 'en'" src="../../../static/image/quanen.png" alt="">
                    <img v-else src="../../../static/image/quan.png" alt="">

                </div>
            </div>
            <div class="back" @click="centerDialogVisible = false">
                {{ $t('assemble.返回') }}
            </div>

        </el-dialog>
    </div>
</template>

<script>
import { myIntegralList, userOwn } from "@/utils/api"
export default {
    data() {
        return {
            pageInfo: {
                total: 0,
                page: 1,
                pageSize: 5
            },
            money: "",
            centerDialogVisible: false,
            dataList: [
                // {
                //     id: 1,
                //     name: '111',
                //     mobile: '18745362734',
                //     item: '项目1',
                //     status: 2,
                //     quantity: '333',//积分数量
                //     date: '2022.09.09',//到期时间
                // },
                // {
                //     id: 2,
                //     name: '222',
                //     mobile: '18745362734',
                //     item: '项目3',
                //     status: 2,
                //     quantity: '333',//积分数量
                //     date: '2022.09.09',//到期时间
                // }
            ],
            lang: ""
        }
    },
    created() {
        if (localStorage.getItem("langtype")) {
            this.$i18n.locale = localStorage.getItem("langtype")
            this.lang = localStorage.getItem("langtype")
        } else {
            this.$i18n.locale = 'en'
            this.lang = 'en'
        }
        this.getmyIntegralList()
        this.getuserOwn()
    },
    methods: {
        async getuserOwn() {
            let res = await userOwn({
                token: localStorage.getItem("token")
            })
            console.log("用户信息ssss", res)
            this.money = res.data.money
        },
        async getmyIntegralList() {
            let res = await myIntegralList({
                token: localStorage.getItem("token"),
                page: this.pageInfo.page,
                page_size: this.pageInfo.pageSize
            })
            if (res.code == 1000) {
                console.log("我的积分", res)
                this.dataList = res.data.data
                this.pageInfo.total = res.data.total
                console.log("我的积分..", this.dataList)
            }
        },
        handleduihuanType() {
            console.log("duihuan",this.centerDialogVisible)
            this.centerDialogVisible = true

            //     if (localStorage.getItem("langtype")) {
            //     this.$i18n.locale = localStorage.getItem("langtype")
            //     this.lang = localStorage.getItem("langtype")
            // } else {
            //     this.$i18n.locale = 'en'
            //     this.lang = 'en'
            // }
        },
        handleduihuanTyperouter(type) {
            localStorage.setItem('duihuanType', type)
            if (type == 'xianjin') {
                this.$router.push({ path: '/mine/exchangerecord', query: { duihuanType: 'xianjin' } })
            }
            if (type == 'quan') {
                this.$router.push({ path: '/mine/exchangerecord', query: { duihuanType: 'quan' } })
            }
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageInfo.page = val
            this.getmyIntegralList()
        },
    }
}
</script>

<style scoped lang="scss">
.typeBox {
    width: 100%;
    display: flex;
    justify-content: space-between;

    img {
        width: 162px;
        height: 94px;
        cursor: pointer;
    }
}

.back {
    width: 197px;
    height: 37px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #CCCCCC;
    font-size: 13px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 37px;
    text-align: center;
    margin: 0 auto;
    margin-top: 30px;
    cursor: pointer;
}

.myIntegralcontentbox {
    .title {
        font-size: 15px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 18px;
    }

    .myIntegralbox {
        padding: 30px;
        padding-bottom: 75px;
        background: #ffffff;
        margin-top: 30px;

        .topbox {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .sum {
                font-size: 15px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 18px;
            }

            .duihuanbtn {
                // width: 99px;
                height: 45px;
                background: #D32526;
                border-radius: 10px 10px 10px 10px;
                opacity: 1;
                text-align: center;
                font-size: 17px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #FFFFFF;
                line-height: 45px;
                cursor: pointer;
                padding: 0 30px;
            }
        }

        .databox {
            margin-top: 15px;

            .dataHeader {
                width: 1095px;
                height: 79px;
                display: flex;
                justify-content: space-between;
                padding: 0 30px;
                box-sizing: border-box;

                p {
                    font-size: 15px;
                    font-family: PingFang SC-Bold, PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    line-height: 79px;

                    &:nth-of-type(1) {
                        width: 180px;
                        text-align: center;
                    }

                    &:nth-of-type(2) {
                        width: 261px;
                        text-align: center;

                    }

                    &:nth-of-type(3) {
                        width: 122px;
                        text-align: center;

                    }

                    &:nth-of-type(4) {
                        width: 141px;
                        text-align: center;

                    }

                    &:nth-of-type(5) {
                        width: 200px;
                        text-align: center;

                    }

                    &:nth-of-type(6) {
                        width: 200px;
                        text-align: center;

                    }


                }
            }

            .dataList {
                width: 100%;

                .item {
                    width: 100%;
                    height: 106px;
                    padding: 0 30px;
                    box-sizing: border-box;
                    font-size: 13px;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    border-bottom: 2px solid #F7F8FA;

                    img {
                        width: 60px;
                        height: 60px;
                        border-radius: 50%;
                    }

                }
            }
        }

        .fenye {
            margin-top: 50px;
            float: right;

            ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
                background-color: #0057A7;
            }
        }
    }
}
</style>